<template>
	<view class="content">

		<view class="content_box">
			<view class="content_box_luobo">

				<view class="content_input">
					<view class="content_a">
						<view class="content_lunbo">

							<swiper class="swiper" circular :autoplay="true" :indicator-dots="true"
								indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff"
								@change="changeIndicatorDots" :interval="2000">
								<swiper-item class="swiper-item" v-for="(item,index) in luobolist" :key="index">
									<image :src="item.pic"></image>
								</swiper-item>


							</swiper>

						</view>
					</view>
					<view class="header-line">
						<view class="left">
							<u-icon name="map" color="#FFFFFF" size="16"></u-icon>
							<text class="zheng">郑州市</text>
						</view>

						<view class="right">
							<view class="search">
								按而乐
							</view>
						</view>
						<view>

						</view>

					</view>
				</view>
			</view>
		</view>

		<view class="image_index">
			<view class="image_left" @click="onlinetimes">
				<image class="img" src="../../static/images/shijian.png"></image>
				<view class="image_left_a">
					<text class="text1">上线时间</text>
					<text class="text2" v-if="lineShow">在线中</text>
					<text class="text2" v-if="lineShow==false" style="color: #999999;">离线</text>
				</view>
			</view>
			<view class="image_right" @click="callthepolice">
				<image class="img" src="../../static/images/bj.png"></image>
				<view class="image_left_a">
					<text class="text1">一键报警</text>
					<text class="text2">紧急按钮</text>
				</view>
			</view>


		</view>

		<view class="content_main">
			<view class="content_main_a">
				<view class="content_main_dingdan">

					<view class="booo" style="padding-right: 66rpx;" v-for="item in title" :key="item.id"
						@click="hometab(item.status)">
						{{item.name}}
						<view class="content_main_dingdan_dibu" :class="status==item.status ? 'sb':''">

						</view>
					</view>

				</view>

				<view class="content_main_shijian" v-if="status==2">
					<view v-for="item in homelist" :key="item.id">

						<u-count-down class="count-down" use-slot :time="time" @change="onChange">
							<text class="text_a">距离结束还剩</text>
							<text class="item"><text v-if="timeData.hours < 10">0</text>{{ timeData.hours }}</text>
							<text class="item_a">:</text>
							<text class="item"><text v-if="timeData.minutes < 10">0</text>{{ timeData.minutes }}</text>
							<text class="item_a">:</text>
							<text class="item"><text v-if="timeData.seconds < 10">0</text>{{ timeData.seconds }}</text>
						</u-count-down>


						<view class="zzzz">
							<view class="content_main_zhong" v-for="it in item.cartInfos" :key='it.id'>
								<view class="content_main_zhong_left">
									<image class="img" :src="it.image"></image>
								</view>
								<view class="content_main_zhong_right">
									<view class="content_main_zhong_right_s">
										<view class="content_main_zhong_right_tuina">
											<text class="text1">{{it.serviceName}}</text>
											<text class="text2">服务中</text>
										</view>
										<view class="content_main_zhong_right_x">X1</view>
									</view>
									<view class="content_main_zhong_right_shijian">
										<view style="display: flex;">
											<u-icon style="padding: 0 5rpx 0 0;" name="clock-fill" size="14"
												color="#0EA970" />
											<view class="content_main_zhong_right_shijian_kaishi"
												style="margin-left: 10rpx;">
												<text>开始时间：</text>
												<text>{{item.realStartTime}}</text>
											</view>
										</view>
										<view style="display: flex;padding: 5rpx 0;">
											<u-icon style="padding: 0 5rpx 0 0;" name="clock-fill" size="14"
												color="#0EA970" />
											<view class="content_main_zhong_right_shichang">
												<text> 时长：</text>
												<text>{{item.expectServiceTime}}分钟</text>
											</view>
										</view>

									</view>
									<view class="content_main_zhong_right_bottom">
										<view class="content_main_zhong_right_left">
											<text class="text1">服务费</text>
											<text class="text2">￥
												<text>{{item.realMoney}}</text></text>
										</view>
										<view class="content_main_zhong_right_zhong">|</view>
										<view class="content_main_zhong_right_right">
											<text class="text1">交通费</text>
											<text class="text2">￥<text>
													{{item.travelCost}}</text></text>
										</view>
									</view>

								</view>


							</view>
						</view>
						<view class="youhui">
							<text class="text1">下单时间：</text>
							<text class="text2" style="color: #000;">{{item.createTime}}</text>
						</view>
						<view class="youhui">
							<text class="text1">预约时间：</text>
							<text class="text2" style="color: #000;">{{item.expectStartTime}}</text>
						</view>
						<view class="youhui">
							<text class="text1">优惠金额：</text>
							<text class="text2">{{item.feeRemission}}</text>
						</view>

						<view class="youhui">
							<text class="text1">备注：</text>
							<text class="text2" style="display: block;width: 80%;color: #000;">{{item.remark}}</text>
						</view>
						<view class="shifu">
							<text class="text1">实付：</text>
							<text class="text2">￥{{item.payMoney}}</text>
						</view>

						<view class="content_bottom_fuwu" @click="homeinservice(item.orderId)">
							服务中
						</view>
						<view class="btn" style="height: 50rpx;">

						</view>

					</view>

				</view>
				<view v-if="isshow" style="text-align: center;margin-top: 160rpx;">
					<image src="../../static/iconShow/noOrder.png"></image>
				</view>


				<view class="serviceorder_box_top" v-if="status==1">
					<view class="serviceorder_box_top_a" v-for="item in homelist" :key="item.id">
						<view class="serviceorder_box_top_shang">

							<text class="text3">订单号：{{item.orderId}}</text>

						</view>
						<view class="content_main_zhong" v-for="it in item.cartInfos" :key="it.id">
							<view class="content_main_zhong_left">
								<image class="img" :src="it.image"></image>
							</view>
							<view class="content_main_zhong_right">
								<view class="content_main_zhong_right_s">
									<view class="content_main_zhong_right_tuina">
										<text class="text1">{{it.serviceName}}</text>
										<text class="text2">X{{it.num}}</text>
									</view>
									<view class="yijidan">待接单</view>


								</view>

								<view class="content_main_zhong_right_shijian">
									预约时间：{{item.expectStartTime}}
								</view>
								<view class="content_main_zhong_right_bottom">
									<view class="content_main_zhong_right_left">
										<text class="text1">服务费</text>
										<text class="text2">￥
											<text>{{item.realMoney}}</text></text>
									</view>
									<view class="content_main_zhong_right_zhong">|</view>
									<view class="content_main_zhong_right_right">
										<text class="text1">交通费</text>
										<text class="text2">￥<text>
												{{item.travelCost}}</text></text>
									</view>
								</view>

							</view>


						</view>
						<view class="serviceorder_youhui_a">
							<view class="serviceorder_a">
								<text class="text1">下单时间：</text>
								<text class="text2">{{item.createTime}}</text>
							</view>
						</view>

						<view class="serviceorder_youhui_a">
							<view class="serviceorder_a">
								<text class="text1">预约时间：</text>
								<text class="text2">{{item.expectStartTime}}</text>
							</view>
						</view>
						<view class="serviceorder_youhui_a">
							<view class="serviceorder_a">
								<text class="text1">服务时长：</text>
								<text class="text2">{{item.expectServiceTime}}分钟</text>
							</view>
						</view>
						<view class="serviceorder_youhui">
							<view class="serviceorder_a">
								<text class="text1">优惠卷：</text>
								<text class="text2">-￥10</text>
							</view>
						</view>
						<view class="serviceorder_youhui_a">
							<view class="serviceorder_a">
								<text class="text1">备注：</text>
								<text class="text2" style="display: block;width: 80%;">{{item.remark}}</text>
							</view>
						</view>
						<view class="serviceorder_daohang">
							<view class="serviceorder_daohang_left">服务地址：</view>
							<view class="serviceorder_daohang_right" >
								<text class="text1" @click="copyAddress(item.customerAddress)">{{item.customerAddress}}</text>
								<image class="img" src="../../static/imgs/dh.png" mode="widthFix"
								@click="gotoMap(item.customerLatitude,item.customerLongitude,item.customerAddress)"></image>
							</view>
						</view>

						<view class="shifu">
							<!-- <view class="box1">
								<text class="text2">技师：</text>
								<text class="text3">￥132.00</text>
							</view> -->
							<view class="box2">
								<text class="text">实付：</text>
								<text class="text1">￥{{item.payMoney}}</text>
							</view>

						</view>

						<view class="lianxi">
							<text class="text3" v-if="item.status==1" @click="cancel(item)">取消订单</text>
							<view class="text1" @click="phone(item.id)">
								<image class="img" src="../../static/imgs/dianhua.png"></image>
								联系客户
							</view>

							<text class="text2" @click="Immediately(item.orderId)">立即接单</text>
						</view>
					</view>
				</view>
			</view>


		</view>
		<u-overlay class="van-overlay_a" :show="Dialogshow" :lock-scroll="true">
			<view class="wrappers" style="margin: 60% -2%;">
				<u-icon class="icon" color="#FFFFFF" name="close-circle" size="24px" @click="chadiao" />
				<view class="wrapper_main">

					{{num}}

				</view>
				<view class="box_daojishi">是否拨打报警电话 5秒倒计时开始</view>
				<view class="buttom">
					<text class="text1" @click="quxiao">取消</text>
					<text class="text2" @click="acknowledgealarm">确定</text>
				</view>
			</view>
		</u-overlay>
		<!-- <u-overlay class="van-overlay_b" :show="showobjssss">
			<view class="wrapper" style="height: 100%;width: 100%;">
				<u-icon class="icon" size="28" color="#FFFFFF" @click="vanicon" name="close" />
				<image class="img" src="../../static/imgs/jywc.png"></image>
				<view class="queren">是否确认结束服务</view>
				<view class="bottom" @click="theservice">确定</view>
			</view>
		</u-overlay> -->
		<u-popup class="u-popup" :show="showtc" mode="center" @close="close" @open="open">
			<view class="cancellationoforder_box">
				<view class="cancellationoforder_box_top">
					<view class="cancellationoforder_box_top_shang">请输入结束订单原因</view>


					<view class="wenben">
						<textarea v-model="reason" class="ipt"></textarea>
					</view>
				</view>
				<view class="cancellationoforder_box_bottom" @click="theservice">
					提交
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import onlinetime from '@/pagesA/onlinetime/onlinetime.vue'
	import homeServices from '../../service/homeService'

	export default {
		data() {
			return {
				lineShow: false,
				showtc: false,
				Dialogshow: false,
				currentDate: '12:00',
				minHour: 0,
				maxHour: 24,
				num: 5,
				longitude: '',
				latitude: '',
				ID: 2,
				// curStartTime: '2022-09-01 17:47:00',
				day: '0',
				hour: '00',
				min: '00',
				second: '00',
				title: [{
						id: 2,
						name: '服务中订单',
						status: 2
					},
					{
						id: 1,
						name: '待接单订单',
						status: 1
					}
				],

				nums: '',
				luobolist: [],
				homelist: [],
				time: 0,
				gettime: "",
				timeData: {},
				orderId: 0,
				countDownTime: '',
				jidu: '',
				weidu: '',
				customerPhone: '',
				status: 2,
				isshow: false,
				reason: ''


			}
		},
		onLoad() {
			// this.getCurlocation()
		},
		onShow() {
			this.homeluobo()
			this.homelist = []
			this.checkToken()
			this.hometab(this.status)
		},
		methods: {
			gotoMap(a, b, c) {
				this.navigaToMap(a, b, c)
			},
			navigaToMap(latitude, longitude, name) {
				let hasBaiduMap = plus.runtime.isApplicationExist({
					pname: 'com.baidu.BaiduMap',
					action: 'baidumap://'
				});
				let hasAmap = plus.runtime.isApplicationExist({
					pname: 'com.autonavi.minimap',
					action: 'androidamap://'
				});
				let urlBaiduMap =
					`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`
				urlBaiduMap = encodeURI(urlBaiduMap)
				let urlAmap =
					`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
				// urlAmap = urlAmap(urlBaiduMap)
				if (hasAmap && hasBaiduMap) {
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								plus.runtime.openURL(urlBaiduMap);
								break;
							case 2:
								plus.runtime.openURL(urlAmap);
								break;
						}
					})
				} else if (hasAmap) {
					plus.runtime.openURL(urlAmap);
				} else if (hasBaiduMap) {
					plus.runtime.openURL(urlBaiduMap);
				} else {
					plus.nativeUI.alert("本机未安装指定的地图应用");
					// url = "geo:"+latitude+","+longitude+"?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82";
					// plus.runtime.openURL(url); //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差  
				}
			},
			copyAddress(val) {
				uni.setClipboardData({
					data: val,
					success: () => {
						uni.showToast({
							title: "复制成功"
						})
					}
				});
			},
			async checkToken() {
				
				let params = {
					token: uni.getStorageSync('token')
				}
				let res = await homeServices.checkToken(params)
				
				if (res.data === false) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			},

			async homeluobo() {
				let params = {

				}
				let res = await homeServices.homeluobo(params)
				this.luobolist = res.data.rotation
				this.lineShow = res.data.isOnline

				//this.isOnline=res.data.isOnline
				uni.$emit('updateNum', res.data.isOnline)
			},
			async hometab(status) {
				console.log(status);
				this.status = status
				let params = {
					type: status
				}
				let res = await homeServices.tabhome(params)
				this.homelist = res.data
				console.log(this.homelist)
				if (res.status == 200) {
					if (status == 2 && res.data.length != 0) {
						console.log(res.data);

						this.countDownTime = res.data[0].countDownTime
						let nowTime = this.getlis();
						this.time = new Date(this.countDownTime) - nowTime;
					}
					if (this.homelist.length == 0) {
						this.isshow = true
					} else {
						this.isshow = false
					}
				}


			},
			async tab(status) {
				this.ID = status
				this.status = status
				let params = {
					type: this.status
				}
				let res = await homeServices.tabhome(params)
				this.homelist = res.data
				// if (this.homelist.length !== 0) {
				// 	this.customerPhone = res.data[0].customerPhone
				// 	console.log(this.customerPhone,'gggggggg')
				// }
				// let nowTime=this.getlis();
				// this.time=new Date(this.countDownTime)-nowTime;

				if (res.data) {
					console.log('@@@');
					this.countDownTime = res.data[0].countDownTime


					let nowTime = this.getlis();
					this.time = new Date(this.countDownTime) - nowTime;
					console.log(this.time);
				}



			},
			close() {
				this.reason = ''
				this.showtc = false
				uni.showTabBar()
			},
			open() {

			},
			changeIndicatorDots(e) {
				// console.log(e)
				this.current = e.detail.current;
			},
			homeinservice(orderId) {
				console.log(orderId, 'jjjjjjjjjjjjjjj')
				this.orderId = orderId
				this.showtc = true
				uni.hideTabBar()

			},
			// 取消订单
			cancel(item) {
				let cancelid = item.id
				let cancelorderId = item.orderId
				let status = item.status
				console.log(cancelid, cancelorderId, '000000000000000')
				uni.navigateTo({
					url: `../../pagesB/ordeform/ordeform?id=${cancelid}&cancelorderId=${cancelorderId}&status=${status}`
				})
			},
			// 结束服务
			async theservice() {
				if (this.reason.trim() == '') {
					uni.showToast({
						title: '请输入取消原因',
						icon: 'none'
					})
					return
				} else {
					let params = {
						type: 6,
						orderId: this.orderId,
						earlyEndReason: this.reason
					}

					let res = await homeServices.Immediately(params)
					console.log(res, 'ttttttttttttt')
					this.reason = ''
					uni.showTabBar()
					this.showtc = false
					this.hometab(2)
				}


			},
			// 立即接单
			async Immediately(orderId) {
				let orderIds = orderId
				let params = {
					type: 2,
					orderId: orderIds
				}

				let res = await homeServices.Immediately(params)
				// this.getserviceorder()
				this.hometab(1)
				// console.log(res)
			},
			onChange(e) {
				this.timeData = e
				console.log(e);
				if (e.hours == 0 && e.minutes == 5 && e.seconds == 0) {
						const Audio = uni.createInnerAudioContext();
						Audio.autoplay = true;
						Audio.src = '/static/iconShow/music.mp3'; //音频地址  
						Audio.play(); //执行播放  
						Audio.onError((res) => {
							console.log(res.errMsg);
							console.log(res.errCode);
						});
						Audio.onPause(function() {
							console.log('end');
							Audio.destroy();
						});
				}
			},
			vanicon() {
				uni.showTabBar()
				this.showobjssss = false

			},
			getlis() {
				let yy = new Date().getFullYear();
				var mm =
					new Date().getMonth() < 10 ?
					"0" + (new Date().getMonth() + 1) :
					new Date().getMonth() + 1;
				var dd =
					new Date().getDate() < 10 ?
					"0" + new Date().getDate() :
					new Date().getDate();
				let hh = new Date().getHours();
				let mf =
					new Date().getMinutes() < 10 ?
					"0" + new Date().getMinutes() :
					new Date().getMinutes();
				let ss =
					new Date().getSeconds() < 10 ?
					"0" + new Date().getSeconds() :
					new Date().getSeconds();
				this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
				// console.log(this.gettime)
				//let arr = new Date(this.countDownTime).getTime() - new Date(this.gettime).getTime();
				//this.time = arr
				console.log(this.gettime);
				return new Date(this.gettime).getTime();
			},
			onInput(event) {

				this.currentDate = event.detail

			},
			onlinetimes() {
				uni.navigateTo({
					url:'/pagesA/onlinetime/onlinetime'
				})
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	success: (res) => {
				// 		console.log(res)
				// 		let obj = res.longitude
				// 		let obj1 = res.latitude
				// 		console.log(obj, obj1)
				// 		uni.navigateTo({
				// 			url: `/pagesA/onlinetime/onlinetime?longitude=${obj}&latitude=${obj1}`,
				// 		})
				// 	},
				// 	fail: function(err) {
				// 		console.log(err)
				// 		uni.showToast({
				// 			title: '获取位置失败',
				// 			icon: 'none'
				// 		});
				// 	},
				// })



			},
			switch1Change() {

			},

			chadiao() {
				this.Dialogshow = false
				uni.showTabBar()
			},
			quxiao() {
				this.Dialogshow = false
				uni.showTabBar()
			},
			getlinqu() {
				uni.navigateTo({
					url: '/pagesB/coupon/coupon'
				})
			},
			async callthepolice() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.jidu = res.longitude
						this.weidu = res.latitude
						console.log(this.jidu, this.weidu, 'hhhhhhhhhhhh')
						this.Dialogshow = true
						uni.hideTabBar()
						this.num = 5
						let timer = setInterval(() => {
							this.num--;
							if (this.num < 1) {
								clearInterval(timer)
								this.num = 0
								this.acknowledgealarm()

							}
						}, 1000)

					},
					fail: function(err) {
						console.log(err)
						uni.showToast({
							title: '获取位置失败',
							icon: 'none'
						});
					}
				});


			},
			// 确认报警
			async acknowledgealarm() {
				let params = {
					latitude: this.weidu,
					longitude: this.jidu
				}
				let res = await homeServices.acknowledgealarm(params)
				this.Dialogshow = false
				uni.showTabBar()
				console.log(res, 'vvvvvvvvvvvv')
			},
			//联系客户
			phone(id) {
				this.homelist.forEach(it => {
					if (it.id == id) {
						this.customerPhone = it.customerPhone
						console.log(this.customerPhone, 'gggggggg')
					}
				})
				uni.makePhoneCall({
					phoneNumber: this.customerPhone
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/sass/index.scss'
</style>
